<template>
  <div>
    <el-breadcrumb
      separator-class="el-icon-arrow-left"
      style="margin-right: 30px;position:absolute;right:0;ub main-center cross-center"
    >
      <el-breadcrumb-item :to="{ path: '/' }">购货入库</el-breadcrumb-item>

      <el-breadcrumb-item>库房管理</el-breadcrumb-item>
    </el-breadcrumb>
    <!-- 卡片视图 -->
    <el-card class="box-card">
      <!-- 分栏布局 -->
      <el-row :gutter="20">
        <el-col :span="6">
          <!-- 输入框 -->
          <el-input
            placeholder="请输入购货任务单号"
            v-model.number="input"
            clearable
            @clear="getPurchaseList"
          ></el-input>
        </el-col>
        <el-col :span="6">
          <el-button @click="getPurchaseMessage(input)" type="primary" icon="el-icon-search">搜索</el-button>
        </el-col>
      </el-row>

      <!-- 表格 -->
      <el-table
        :data="purchaseList"
        v-loading="loading"
        style="width: 100%"
        max-height="410"
        border
      >
        <el-table-column fixed type="index" label="#" width="50"></el-table-column>
        <el-table-column fixed prop="id" label="购货任务单号" width="150"></el-table-column>
        <el-table-column prop="productName" label="商品名称" width="120"></el-table-column>
        <el-table-column prop="unitofmeasurement" label="计量单位" width="120"></el-table-column>
        <el-table-column prop="model" label="型号" width="120"></el-table-column>
        <el-table-column prop="purchaseVolume" label="商品应入库数量" width="120"></el-table-column>
        <el-table-column prop="actualVolume" label="实际入库数量" width="120"></el-table-column>
        <el-table-column label="状态" width="120">
          <template slot-scope="scope">
            <el-switch
              class="switch"
              v-model="scope.row.taskStatus"
              :active-value="1"
              :inactive-value="0"
              active-color="#F04134"
              active-text="已入库"
              inactive-color="#00A854"
              inactive-text="未入库"
              width="72"
              disabled
            ></el-switch>
          </template>
        </el-table-column>
        <el-table-column prop="date" label="入库日期" width="120"></el-table-column>
        <el-table-column prop="remark" label="备注" width="120"></el-table-column>
        <el-table-column prop="createTime" label="创建时间" width="120"></el-table-column>
        <el-table-column prop="updateTime" label="更新时间" width="120"></el-table-column>
        <el-table-column fixed="right" label="操作" width="200">
          <template slot-scope="scope">
            <el-button type="success" @click="showDialog(scope.row)" size="mini">查看</el-button>
            <el-button type="danger" @click="showEditDialog(scope.row)" :disabled="isBtnVisible(scope.row)" size="mini">确认入库</el-button>
            <!-- <el-button
              @click.native.prevent="deleteRow(scope.$index, tableData)"
              type="text"
              size="small"
            >移除</el-button>-->
          </template>
        </el-table-column>
      </el-table>

      <!-- 分页的完整功能 -->
      <div class="block">
        <!-- <span class="demonstration">完整功能</span> -->
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="queryInfo.pageNum"
          :page-sizes="[5, 10, 20]"
          :page-size="queryInfo.pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
          background
        ></el-pagination>
      </div>

      <!-- 确认购货入库单的对话框 -->
      <el-dialog
        title="购货入库单"
        :visible.sync="updateDialogVisible"
        width="800px"
        @close="updateFormClosed"
      >
        <!-- 内容主题区域 -->
        <el-form
          :model="updateForm"
          :rules="updateFormRules"
          ref="updateFormRef"
          label-width="120px"
        >
          <!-- 内容左主题区域 -->
          <div class="dialog-left" style="width: 48%;float:left; margin-left:-10px;height:260px">
            <el-form-item label="购货任务单号:" prop="id">
              <el-input v-model="updateForm.id" disabled></el-input>
            </el-form-item>
            <el-form-item label="商品名称:" prop="productName">
              <el-input v-model="updateForm.productName" disabled></el-input>
            </el-form-item>
            <el-form-item label="计量单位:" prop="unitofmeasurement">
              <el-input v-model="updateForm.unitofmeasurement" disabled></el-input>
            </el-form-item>
            <el-form-item label="型号:" prop="model">
              <el-input v-model="updateForm.model" disabled></el-input>
            </el-form-item>
          </div>
          <!-- 内容右主题区域 -->
          <div class="dialog-right" style="width: 52%;float:right; margin-right:10px;height:260px">
            <el-form-item label="应入库数量:" prop="purchaseVolume">
              <el-input v-model="updateForm.purchaseVolume" disabled></el-input>
            </el-form-item>
            <el-form-item label="实际入库数量:" prop="actualVolume">
              <el-input v-model.number="updateForm.actualVolume"></el-input>
            </el-form-item>
            <el-form-item label="入库日期:" prop="date">
              <el-input v-model="updateForm.date" disabled></el-input>
            </el-form-item>
            <el-form-item label="备注:" prop>
              <el-input
                type="textarea"
                :autosize="{ minRows: 2, maxRows: 4}"
                placeholder="请输入内容"
                v-model="updateForm.remark"
              ></el-input>
            </el-form-item>
          </div>
        </el-form>
        <!-- 底部区域 -->
        <div slot="footer" class="dialog-footer" style="float:none">
          <el-button @click="updateDialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="updateFormChange(updateForm)">确 定 入 库</el-button>
        </div>
      </el-dialog>

      <!-- 查看购货入库单的对话框 -->
      <el-dialog title="购货入库单" :visible.sync="watchDialogVisible" width="800px">
        <!-- 内容主题区域 -->
        <el-form :model="watchForm" label-width="120px">
          <!-- 内容左主题区域 -->
          <div class="dialog-left" style="width: 48%;float:left; margin-left:-10px;height:310px">
            <el-form-item label="购货任务单号:" prop="id">
              <el-input v-model="watchForm.id" disabled></el-input>
            </el-form-item>
            <el-form-item label="商品名称:" prop="productName">
              <el-input v-model="watchForm.productName" disabled></el-input>
            </el-form-item>
            <el-form-item label="计量单位:" prop="unitofmeasurement">
              <el-input v-model="watchForm.unitofmeasurement" disabled></el-input>
            </el-form-item>
            <el-form-item label="型号:" prop="model">
              <el-input v-model="watchForm.model" disabled></el-input>
            </el-form-item>

            <el-form-item label="应入库数量:" prop="purchaseVolume">
              <el-input v-model="watchForm.purchaseVolume" disabled></el-input>
            </el-form-item>
          </div>
          <!-- 内容右主题区域 -->
          <div class="dialog-right" style="width: 52%;float:right; margin-right:10px;height:310px">
            <el-form-item label="实际入库数量:" prop="actualVolume">
              <el-input v-model.number="watchForm.actualVolume" disabled></el-input>
            </el-form-item>
            <el-form-item label="状态:" prop="taskStatus">
              <el-input v-model.number="watchForm.taskStatus" disabled></el-input>
            </el-form-item>
            <el-form-item label="入库日期:" prop="date">
              <el-input v-model.number="watchForm.date" disabled></el-input>
            </el-form-item>
            <el-form-item label="创建时间:" prop="createTime">
              <el-input v-model.number="watchForm.createTime" disabled></el-input>
            </el-form-item>
            <el-form-item label="更新时间:" prop="updateTime">
              <el-input v-model.number="watchForm.updateTime" disabled></el-input>
            </el-form-item>
          </div>
        </el-form>
        <!-- 底部区域 -->
        <div slot="footer" class="dialog-footer" style="float:none">
          <el-button type="primary" @click="watchDialogVisible = false">确 定</el-button>
        </div>
      </el-dialog>
    </el-card>
  </div>
</template>

<script>
export default {
  data() {
    return {
      input: "",
      currentTime: new Date(), // 获取当前时间
      loading: true,
      // 获取购货入库单列表的参数对象
      queryInfo: {
        id: "",
        // 当前页数
        pageNum: 1,
        // 当前每页显示多少条数据
        pageSize: 5,
      },
      // 获取编辑购货入库对话框的参数对象
      queryInfoUpdate: {
        id: "",
        actualVolume: 0,
        date: "",
        remark: "",
      },
      // 购货入库单列表的数据
      purchaseList: [],

      // 表单的模拟数据
      tableData: [
        {
          id: 1001,
          productName: "101号墨镜",
          unitofmeasurement: "200g/个",
          model: "101",
          purchaseVolume: 200,
          actualVolume: 0,
          taskStatus: 0,
          createTime: "2020-8-1",
          updateTime: "2020-8-2",
        },
        {
          id: 1002,
          productName: "102号墨镜",
          unitofmeasurement: "150g/个",
          model: "102",
          purchaseVolume: 120,
          actualVolume: 0,
          taskStatus: 0,
          createTime: "2020-8-1",
          updateTime: "2020-8-2",
        },
        {
          id: 1003,
          productName: "103号墨镜",
          unitofmeasurement: "150g/个",
          model: "103",
          purchaseVolume: 120,
          actualVolume: 0,
          taskStatus: 0,
          createTime: "2020-8-1",
          updateTime: "2020-8-2",
        },
      ],
      total: 0,
      // 控制修改和确认购货入库单的对话框的显示与隐藏
      updateDialogVisible: false,
      // 控制查看 购货入库单的对话框的显示与隐藏
      watchDialogVisible: false,
      // 展示编辑购货入库单的对话框的相关数据
      updateForm: {
        id: 0,
        productName: "",
        unitofmeasurement: "",
        model: "",
        purchaseVolume: 0,
        actualVolume: 0,
        date: "",
        remark: "",
      },
      // 展示购货入库单详情的对话框的相关数据
      watchForm: {
        id: 0,
        productName: "",
        unitofmeasurement: "",
        model: "",
        purchaseVolume: 0,
        actualVolume: 0,
        taskStatus: 0,
        date: "",
        createTime: "",
        updateTime: "",
      },
      // 购货入库单的验证规则对象
      updateFormRules: {
        actualVolume: [
          { required: true, message: "实际入库数量不能为空" },
          { type: "number", message: "实际入库数量必须为数字值" },
        ],
      },
    };
  },

  created() {
    this.getPurchaseList();

    var _this = this; //声明一个变量指向Vue实例this，保证作用域一致
    var date = new Date();
    var year = date.getFullYear();
    var month = date.getMonth() + 1;
    var day = date.getDate();
    var hour = date.getHours();
    var minutes = date.getMinutes();
    var second = date.getSeconds();
    _this.currentTime = //修改数据date
      year +
      "-" +
      (month < 10 ? "0" + month : month) +
      "-" +
      (day < 10 ? "0" + day : day) +
      "" +
      " " +
      (hour < 10 ? "0" + hour : hour) +
      ":" +
      (minutes < 10 ? "0" + minutes : minutes) +
      ":" +
      (second < 10 ? "0" + second : second);
  },
  methods: {
    // 获取购货入库单列表的方法
    async getPurchaseList() {
      this.queryInfo.id = "";
      this.loading = true;
      const _this = this;
      const { data: res } = await _this.$http.get(
        `/api/warehouse/getPurchaseReceiptVo?id=${this.queryInfo.id}&pageNum=${this.queryInfo.pageNum}&pageSize=${this.queryInfo.pageSize}`
        // {
        //   params:this.queryInfo
        // }
        // this.queryInfo
      );
      if (res.code !== 200) {
        _this.$message.error(res.msg);
      }
      _this.purchaseList = res.data;
      _this.total = res.total;
      this.loading = false;
      console.log(this.loading);
      console.log(res.code);
      console.log(_this.total);
    },

    // 返回查询结果
    async getPurchaseMessage(input) {
      if (isNaN(input)) {
        return this.$message.error("只能输入数字");
      }

      if (Number(input) === 0) {
        this.getPurchaseList();
        return this.$message.success("所有数据获取成功");
      }

      this.queryInfo.id = input;
      this.loading = true;
      const { data: res } = await this.$http.get(
        "/api/warehouse/getPurchaseReceiptVo",
        {
          params: this.queryInfo,
        }
      );
      if (res.code !== 200) {
        this.$message.error(res.msg);
      }
      this.purchaseList = [];
      this.purchaseList = res.data;
      this.total = res.total;
      this.loading = false;
      console.log(this.purchaseList);
      console.log(this.queryInfo);
    },

    // 监听编辑购货入库单的对话框的关闭事件  关闭后重置输入框
    updateFormClosed() {
      this.$refs.updateFormRef.resetFields();
    },
    // 展示购货入库单详情对话框
    async showDialog(row) {
      this.watchDialogVisible = true;
      console.log(row.id);
      // console.log(row.unitofmeasurement)
      this.watchForm.id = row.id;
      this.watchForm.productName = row.productName;
      this.watchForm.unitofmeasurement = row.unitofmeasurement;
      this.watchForm.model = row.model;
      this.watchForm.purchaseVolume = row.purchaseVolume;
      this.watchForm.actualVolume = row.actualVolume;
      this.watchForm.taskStatus = row.taskStatus;
      this.watchForm.date = row.date;
      this.watchForm.createTime = row.createTime;
      this.watchForm.updateTime = row.updateTime;
    },
    // 展示编辑购货入库单的对话框
    async showEditDialog(row) {
      console.log(row.id);
      this.updateDialogVisible = true;
      this.updateForm.id = row.id;
      this.updateForm.productName = row.productName;
      this.updateForm.unitofmeasurement = row.unitofmeasurement;
      this.updateForm.model = row.model;
      this.updateForm.purchaseVolume = row.purchaseVolume;
      this.updateForm.actualVolume = row.purchaseVolume;
      this.updateForm.date = this.currentTime;
      this.updateForm.remark = row.remark;
      // console.log(this.currentTime);
      console.log(this.queryInfoUpdate);
    },
    // 监听 pagesize 改变事件
    handleSizeChange(newSize) {
      console.log(newSize);
      this.queryInfo.pageSize = newSize;
      this.getPurchaseList();
    },
    // 监听 页码值 改变的事件
    handleCurrentChange(newPage) {
      console.log(newPage);
      this.queryInfo.pageNum = newPage;
      this.getPurchaseList(); 
    },

    // 确认入库按钮的触发事件
    async updateFormChange(updateForm) {
      // console.log(updateForm.id);
      // console.log("以上是updateForm内容");
      this.queryInfoUpdate.id = updateForm.id;
      this.queryInfoUpdate.actualVolume = updateForm.actualVolume;
      this.queryInfoUpdate.date = updateForm.date;
      this.queryInfoUpdate.remark = updateForm.remark;

      // console.log(this.queryInfoUpdate.actualVolume);
      // console.log("以上是queryInfoUpdate内容");
      let form = {};
      form.actualVolume = this.queryInfoUpdate.actualVolume;
      form.date = this.queryInfoUpdate.date;
      form.remark = this.queryInfoUpdate.remark;

      const _this = this;
      const { data: res } = await _this.$http.post(
        `/api/warehouse/editWarehouseingVo?id=${this.queryInfoUpdate.id}`,
        form
      );
      console.log(this.queryInfoUpdate);
      if (res.code == 200) {
        _this.$message(res.msg);
      }
      if (res.code !== 200) {
        _this.$message.error(res.msg);
      }
      this.updateDialogVisible = false;
      this.getPurchaseList();
      console.log(res.code);
      console.log(this.queryInfoUpdate);
    },

    // 如果按钮需要被禁用，则返回true，否则返回false
    isBtnVisible(row){
      // 当任务状态为已入库(1),则该按钮被禁用
      if(row.taskStatus==1){
        return true
      }
      return false
    }
  },
};
</script>

<style scoped>
.el-table {
  margin-top: 20px;
  margin-bottom: 20px;
}
.el-card {
  /* margin-top: 20px; */
  /* height: 552px; */
  margin-top: -15px;
  height: 590px;
  overflow: auto;
}
.el-breadcrumb {
  /* margin-top: -25px;
  margin-bottom: 10px; */
  margin-top: 10px;
}
/* 分页样式 */
/* .el-pagination {
  position: fixed;
  right: 20px;
  bottom: 80px;
} */
.el-row {
  margin-top: 20px;
}
</style>